<%--
  Created by IntelliJ IDEA.
  User: han.yuan
  Date: 2017/5/27
  Time: 23:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <title>史上最牛逼的视频播放器</title>
</head>
<style>
    .wrap{
        border:1px solid red;
        /*height:80%;
        width:80%;*/
        height:800px;
        width:1200px;
        margin:0 auto;
        background-color:#A6FFFF;
    }
    .video_content{
        height:700px;
        width:1200px;
        background-color: #7AFEC6;
    }
    .video{
        height:600px;
        width:1200px;
        margin:0 auto;
        background-color:#FFDC35;
    }
    .center{
        margin:0 auto;
    }
    .progress{
        width:1200px;
        height:20px;
    }
    .control{

    }
    .currentTime,.allTime{
        width:100px;
        height:20px;
        float:left;
    }
    .pro_bar{
        width:1000px;
        height:20px;
        background-color: chartreuse;
        float:left;
    }
</style>
<body>
  <h1 class="center">
      视频播放器1.0
  </h1>
  <div class="wrap" id="wrap">
     <div class="video_content">
        <video class="video" height="600" width="1200" src="./video/test.mp4" controls>
            您的浏览器不支持html5的video视频播放，请更换现代浏览器，呜啦啦啦啦
        </video>
         <div class="progress">
             <div class="currentTime">00:00:00</div>
             <div class="pro_bar"></div>
             <div class="allTime">00:00:00</div>
         </div>
         <div class="control">

         </div>
     </div>
  </div>
</body>
</html>
